<template>
  <div class="container">
    <div class="chart">
      <PieChart :optionsData="optionsData" v-if="chartflag" />

    </div>
    <div class="title">
      <div v-for="(item, index) in optionsData" :key="index">
        {{ item.name }}<span :style="item.itemStyle">{{ item.value }} </span>个
      </div>
    </div>
  </div>
</template>
<script>
import PieChart from '@views/website/piechart.vue'
import website from '@/api/website'
export default {
  name: 'LeftItem1',
  components: {
    PieChart
  },
  data() {
    return {
      chartflag: true,
      colors: ['#2A71FF', '#00EDFE', '#FEDB4B', '#FE7C2F'],
      optionsData: [
        {
          name: '五星',
          value: 128,
          itemStyle: {
            color: '#2A71FF'
          }
        },

        {
          name: '四星',
          value: 87,
          itemStyle: {
            color: '#00EDFE'
          }
        },
        {
          name: '三星',
          value: 96,
          itemStyle: {
            color: '#FEDB4B'
          }
        },
        {
          name: '二星',
          value: 30,
          itemStyle: {
            color: '#F1EB4B'
          }
        }
      ]
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      website.leftapi1().then((res) => {
        if (res.code === 'success') {
          this.optionsData = []
          if (res.result) {
            let data = res.result
            for (let i = 0; i < data.length; i++) {
              this.optionsData.push({
                value: data[i]['mvalue'],
                name: data[i]['name'],
                itemStyle: { color: this.colors[i] }
              })
            }
            this.chartflag = true
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: space-between;
  .chart {
    width: 40%;
    height: 100%;
  }
  .title {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    div {
      margin: 2px;
    }
    span {
      font-size: 16px;
      padding: 5px 10px;
    }
  }
}
</style>
